<template>
	<div class="bim-drawer" :class="!visible ? '' : 'bim-drawer-open'">
		<div class="bim-drawer-mask"></div>
		<div class="bim-drawer-left">
			<div class="bim-drawer-content-wrapper site-base-bg">
				<div class="bim-drawer-content">
					<div class="bim-drawer-wrapper-body">
						<div class="bim-drawer-body">
							<div class="main-content-drawer">
								<div class="door-monitor">
									<div class="line-block-placeholder"></div>
									<div class="header-block">
										<h3 class="box-title">门禁监控</h3>
									</div>
									<div class="list-block">
										<transition-group
												name="bim-notification-fade"
												tag="div"
												v-bind:css="false"
												v-on:before-enter="beforeEnter"
												v-on:enter="enter"
												v-on:leave="leave"
												v-loading="listLoading">
											<div
													class="list-item"
													v-for="(item, index) in list"
													:key="item.id"
													:class="item.state === 'in' ? 'entry' : 'exit'"
													:data-index="index">
												<div class="list-item__profile">
													<img :src="item.logo">
												</div>
												<div class="list-item__name" :title="item.name">
													<span>{{item.user_name}}</span>
												</div>
												<div class="list-item__type" :title="item.type">
													<span>{{item.job_type}}</span>
												</div>
												<div class="list-item__time">
													<span>{{item.created_at}}</span>
												</div>
												<div class="list-item__status">
													<span>{{item.state === 'in' ? '进入' : '出场'}}</span>
												</div>
											</div>
										</transition-group>
										<el-pagination
												v-show="total>0"
												background
												layout="prev, pager, next"
												@current-change="handleCurrentChange"
												:page-size="15"
												:total="total"
												prev-text="上一页"
												next-text="下一页"
												:hide-on-single-page=true
												class="bim-pager">
										</el-pagination>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="bim-drawer-right">
			<div class="bim-drawer-content-wrapper site-base-bg">
				<div class="bim-drawer-content">
					<div class="bim-drawer-wrapper-body">
						<div class="bim-drawer-body">
							<div class="main-content-drawer">
								<div class="door-monitor">
									<div class="line-block-placeholder"></div>
									<div class="header-block">
										<h3 class="box-title">门禁监控</h3>
									</div>
									<div class="statis-list">
										<div class="statis-list-item statis-total">
											<span class="danger-badge">门禁总报警数：共 <b>{{messCount}}</b> 条</span>
										</div>
										<div class="statis-list-item statis-today">
											<span class="danger-badge">当天门禁总报警数：共 <b>{{todayMessCount}}</b> 条</span>
										</div>
										<div class="statis-list-item statis-today-unhandle">
											<span class="danger-badge">当天未查看门禁报警数：共 <b>{{todayUnMessCount}}</b> 条</span>
										</div>
									</div>
									<div class="line-block-placeholder"></div>
									<div class="alarm-messages layout-home" v-if="alarms.length">
										<transition-group
												tag="div"
												name="slide-fade">
											<div
													class="alarm-meta"
													v-for="(item, index) in alarms"
													:key="item.id">
												<div class="alarm-meta-detail">
													<h3 class="alarm-meta-title">{{item.event_msg}}</h3>
													<div class="alarm-meta-description">
														<span class="datetime">{{item.created_at}}</span>
													</div>
													<div class="alarm-meta-opt">
														<!--<button class="bim-btn bim-btn-handle">处理</button>-->
														<!--<button class="bim-btn bim-btn-ignore">忽略</button>-->
														<button class="bim-btn bim-btn-scene" @click="showDialog(item, index)">查看</button>
													</div>
												</div>
												<div class="alarm-meta-pic">
													<img :src="item.pic_url" alt="">
												</div>
											</div>
										</transition-group>
									</div>
									<div class="alarm-messages layout-home" style="display: flex;justify-content: center;align-items: center;color: #a7c7e1;font-size: 20px;" v-else>暂无当天报警数据</div>
									<div class="line-block-placeholder"></div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<el-dialog :visible.sync="dialogLiveVisible" :append-to-body="true" :show-close="false" custom-class="bim-dialog">
			<img :src="magnifierSrc" alt="">
		</el-dialog>
	</div>
</template>

<script>
import Velocity from 'velocity-animate'

export default {
	data() {
		return {
			visible: false,
			interval: null,
			list: [],
			total: 0,
			listLoading: true,
			alarms: [],
			alarmsLoading: true,
			dialogLiveVisible: false,
			magnifierSrc: null,
			messCount: 0,
			todayMessCount: 0,
			todayUnMessCount: 0,
			todayDate: new Date().getFullYear() + '-' + String(new Date().getMonth() + 1).padStart(2, '0') + '-' + String(new Date().getDate()).padStart(2, '')
		}
	},
	created() {
		const _self = this

		_self.interval = setInterval(() => {
			if (!_self.visible) {
				_self.visible = true
			}
			clearInterval(_self.interval)
		}, 500)

		_self.getList()
		_self.getAlarms()
		_self.socketInit()
		_self.getMessCount()

		// const randomGetTime = 2000
		// setInterval(() => {
		//   _self.$http.get('/user/list', { page: 1, pagesize: 1 }).then(response => {
		//     // loading = this.openLoading()
		//     _self.list.splice(_self.list.length - 1, 1)
		//     _self.list.splice(0, 0, response.data[0])
		//   })
		// }, randomGetTime)
	},
	beforeDestroy() {
		if (this.interval) {
			clearInterval(this.interval)
		}
	},
	methods: {
		getList(page = 1) {
			this.listLoading = true
			this.$http.get('/api/door/inout', {params: {page: page}}).then(response => {
				this.list = response.data.data
				this.total = response.data.total_pages
				this.listLoading = false
			})
		},
		handleCurrentChange(e) {
			this.getDataList(e)
		},
		getAlarms() {
			this.alarmsLoading = true
			this.$http.get('/api/report', {
				params: {
					rows: 10,
					event_type: 'door',
					event_state: 1,
					start_time: this.todayDate + ' 00:00:00',
					end_time: this.todayDate + ' 23:59:59'
				}
			}).then(response => {
				this.alarms = response.data.data
				this.alarmsLoading = false
			})
		},
		socketInit() {
			const ws = new WebSocket(this.$wsUrl)
			const _self = this
			ws.onmessage = evt => {
				/* eslint-disable no-eval */
				const res = eval('(' + evt.data + ')')
				switch (res.module) {
						// case 'perimeter':
						//   _self.alarms.splice(0, 1, res.data)
						//   break
					case 'door':
						_self.list.splice(0, 1, res.data)
						break
						// case 'car':
						//   _self.alarms.splice(0, 1, res.data)
						//   break
					default:
						break
				}
			}
			ws.onclose = function () {
				// console.log('连接已关闭...')
			}
			this.over = () => {
				ws.close()
			}
		},
		getMessCount() {
			this.$http.get('/api/report/count', {
				params: {
					event_type: 'door'
				}
			}).then(response => {
				this.messCount = response.data.data.count
			})
			this.$http.get('/api/report/count', {
				params: {
					event_type: 'door',
					start_time: this.todayDate + ' 00:00:00',
					end_time: this.todayDate + ' 23:59:59'
				}
			}).then(response => {
				this.todayMessCount = response.data.data.count
			})
			this.$http.get('/api/report/count', {
				params: {
					event_type: 'door',
					start_time: this.todayDate + ' 00:00:00',
					end_time: this.todayDate + ' 23:59:59',
					event_state: 1
				}
			}).then(response => {
				this.todayUnMessCount = response.data.data.count
			})
		},
		beforeEnter: function (el) {
			el.style.opacity = 0
			el.style.height = 0
		},
		enter: function (el, done) {
			const delay = el.dataset.index * 150
			setTimeout(function () {
				Velocity(
						el,
						{opacity: 1, height: '40px'},
						{complete: done}
				)
			}, delay)
		},
		leave: function (el, done) {
			Velocity(
					el,
					{opacity: 0, height: 0},
					{complete: done}
			)
		},
		showDialog(item, index) {
			var self = this
			self.dialogLiveVisible = true
			self.magnifierSrc = item.pic_url
			self.$http.post('/api/report/set_read', {report_id: item.id}).then(response => {
				if (response.data.state === 'success') {
					self.alarms.splice(index, 1)
				}
			})
		}
	}
}
</script>

<style lang="scss" scoped>
.list-block {
	padding-bottom: 30px;
	height: 465px;
}
</style>
